<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List of Results</title>
<style type="text/css">
	a {
		color:blue;
		cursor:pointer;
	}
</style>
</head>
<body>
	<!-- 输入区 -->
	<form action="${pageContext.request.contextPath}/ArticleServlet" method="post" id="searchForm">
		<input type="hidden" name="currPageNum" value="1" />
		<input type="hidden" name="pageSize" value="2" /> 
		<table border="2" align="center">
			<tbody>
				<tr>
					<th>输入关键字</th>
					<td><input id="keyword" type="text" name="keyword" value="${requestScope.KEYWORD}" maxlength="10"></td>
					<td><input id="search" type="button" onclick="" value="搜索"/></td>
				</tr>
			</tbody>			
		</table>
	</form>
	
	<!-- 结果显示区 -->
	<table border="2" align="center">
		<tr>
			<th>编号</th>
			<th>标题</th>
			<th>内容</th>
		</tr>	

		<c:forEach var="article" items="${requestScope.PAGE.pageList}">
		 <tr>
			<td>${article.id }</td>
			<td>${article.title }</td>
			<td>${article.content }</td>
		 </tr>
		</c:forEach>	
			
		<tr>
			<td colspan="3" align="center">
			<!-- 超链接默认是get请求，这里用js修改进行参数提交，而不用href -->
			<c:choose>
				<c:when test="${requestScope.PAGE.currPage>1}">
					<a onclick="sendPageNum(1)">首页</a>
				</c:when>
				<c:otherwise>
					首页
				</c:otherwise>
			</c:choose>
			
			<c:choose>
				<c:when test="${requestScope.PAGE.currPage>1}">
					<a onclick="sendPageNum(${requestScope.PAGE.currPage}-1)">上一页</a>
				</c:when>
				<c:otherwise>
					上一页
				</c:otherwise>
			</c:choose>
			
			<c:choose>
				<c:when test="${requestScope.PAGE.currPage<requestScope.PAGE.totalPageNum}">
					<a onclick="sendPageNum(${requestScope.PAGE.currPage+1})">下一页</a>
				</c:when>
				<c:otherwise>
					下一页
				</c:otherwise>
			</c:choose>
			
			<c:choose>
				<c:when test="${requestScope.PAGE.currPage<requestScope.PAGE.totalPageNum}">
					<a onclick="sendPageNum(${requestScope.PAGE.totalPageNum})">末页</a>
				</c:when>
				<c:otherwise>
					末页
				</c:otherwise>
			</c:choose>
				
			</td>
		</tr>	
	</table>
	<script type="text/javascript">
		//正则表达式实现trim函数，用于输入的关键字去空格
		var trim = function(str){
			//去掉str左边的空格
			str = str.replace(/^\s*/,"");
			//去掉右边的空格
			str = str.replace(/\s*$/,"");
			//返回str
			return str;
		}

		//绑定搜索按钮单击事件
		document.getElementById('search').onclick = function(){
			//获取关键字
			var key = document.getElementById('keyword').value
			//去空格
			key = trim(key);
			//如果未输入关键字则禁止提交
			if (key == null || key.length == 0) {
				alert("请输入关键字！");
				return false;
			}
			document.getElementById('searchForm').submit();
		}
		
		//发送页码
		function sendPageNum(currPageNum){
			//获取表单对象
			var formEle = document.forms[0];
			//修改currPageNum
			formEle.currPageNum.value = currPageNum;
			//提交表单
			formEle.submit();
		}

	</script>
</body>
</html>